<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <!-- 全局变量 -->
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
        var name = "shuangshuang";//在函数外定义的是全局变量，任何脚本和函数都可以访问。
        document.getElementById("demo1").innerHTML = name + " 函数外部";//这里可以访问name
        function1();
        function function1() {
            document.getElementById("demo2").innerHTML = name + " 函数内部";//这里也可以访问name
        }
    </script>
<!-- ———————————————————————————————————————————————————————————————————————————————————— -->
    <!-- 局部变量 -->
    <p id="demo3"></p>
    <p id="demo4"></p>
    <script>
      function2();
        function function2(){
            var name2 = "xiaoshuangshuang";
            document.getElementById("demo3").innerHTML = name2 + " 函数内部， type: " + typeof name2;//这里可以访问到name1
        }
        // document.getElementById("demo4").innerHTML = name2 + " 函数外部";//这里访问不到name2，这句显示不出来
        document.getElementById("demo4").innerHTML = " 函数外部， typeof： "+typeof name2;//这里访问不到name2
    </script>
<!-- ———————————————————————————————————————————————————————————————————————————————————— -->
    <!-- let关键字 -->
    <script>
        //不使用let
        var x = 10;
        console.log(x);
        {
            var x = 4;
            console.log(x);
        }
        console.log(x);
    </script>
    <script>
        //使用let
        var x = 10;
        console.log(x);
        {
            let x = 3;
            console.log(x);
        }
        console.log(x);
    </script>
    
</body>
</html>